<template>
  <div class="app-container">
    <el-row>
      <el-col :span="8" class="card-box" v-for="item in configList">
        <el-card class="el-card">
          <template #header>
            <span class="oauth-login-item">
              <svg viewBox="0 0 100 100">
                <svg-icon :icon-class="item.sourceIcon" />
              </svg>
              <span>&nbsp{{ getDictLabel(sys_social_auth, item.sourceType) }}</span>
            </span>
          </template>
          <div class="el-table">
            <table cellspacing="0" style="width: 100%;">
              <tbody>
              <tr>
                <td class="el-table__cell"><div class="nowrap">平台名称</div></td>
                <td class="el-table__cell"><div class="wrap">{{item.sourceName}}</div></td>
              </tr>
              <tr>
                <td class="el-table__cell"><div class="nowrap">客户端ID</div></td>
                <td class="el-table__cell"><div class="wrap" :title="item.clientId">{{item.clientId}}</div></td>
              </tr>
              <tr>
                <td class="el-table__cell"><div class="nowrap">回调地址</div></td>
                <td class="el-table__cell"><div class="wrap" :title="item.redirectUri">{{item.redirectUri}}</div></td>
              </tr>
              </tbody>
            </table>
          </div>
          <div class="el-button-group" style="margin-top: 13px; margin-left: 10px;display: flex; justify-content: flex-end">
            <el-button
                :type="item.status === '0' ? 'success' : 'primary'"
                plain
                icon="Edit"
                @click="handleUpdate(item)"
                v-hasPermi="['auth:config:edit']"
            ><span>配置</span></el-button>
            <el-button
                :type="item.status === '0' ? 'success' : 'primary'"
                plain
                :icon="item.status === '0' ? 'close' : 'check'"
                @click="item.status === '0' ? off(item.id) : on(item.id)"
                v-hasPermi="['auth:config:edit']"
            ><span>{{item.status === '0' ? '停用' : '启用'}}</span></el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 添加或修改三方认证配置对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="configRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="平台名称" prop="sourceName">
          <el-input v-model="form.sourceName" placeholder="请输入平台名称" />
        </el-form-item>
        <el-form-item label="客户端ID" prop="clientId">
          <el-input v-model="form.clientId" type="textarea" placeholder="请输入客户端ID" />
        </el-form-item>
        <el-form-item label="客户端密钥" prop="clientSecret">
          <el-input v-model="form.clientSecret" type="textarea" placeholder="请输入客户端密钥" />
        </el-form-item>
        <el-form-item label="回调地址" prop="redirectUri">
          <el-input v-model="form.redirectUri" placeholder="请输入回调地址" />
        </el-form-item>
        <el-form-item label="备注信息" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup name="Config">
import { listConfig, getConfig, onConfig, offConfig, updateConfig } from "@/api/social/config";
import { getDictLabel } from '@/utils/dict'

const { proxy } = getCurrentInstance();
const { sys_social_auth } = proxy.useDict('sys_social_auth');

const loading = ref(true);
const configList = ref([]);
const open = ref(false);
const title = ref("");

const data = reactive({
  // 表单参数
  form: {},
  // 查询参数
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    sourceName: null,
    sourceType: null,
    clientId: null,
    clientSecret: null,
    redirectUri: null,
    status: null,
  },
  rules: {
    sourceName: [
      { required: true, message: "平台名称不能为空", trigger: "blur" }
    ],
    sourceType: [
      { required: true, message: "平台类型不能为空", trigger: "change" }
    ],
    clientId: [
      { required: true, message: "客户端ID不能为空", trigger: "blur" }
    ],
    clientSecret: [
      { required: true, message: "客户端密钥不能为空", trigger: "blur" }
    ],
    redirectUri: [
      { required: true, message: "回调地址不能为空", trigger: "blur" },
      { pattern: /^(http|https):\/\/[a-zA-Z0-9.-]+.[a-zA-Z0-9]{1,4}/, message: "请输入正确的回调地址", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询三方认证配置列表 */
function getList() {
  loading.value = true;
  listConfig(queryParams.value).then(response => {
    configList.value = response.rows;
    loading.value = false;
  });
}

/** 修改按钮操作 */
function handleUpdate(obj) {
  reset();
  getConfig(obj.id).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = getDictLabel(sys_social_auth, obj.sourceType) + " 认证配置";
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["configRef"].validate(valid => {
    if (valid) {
      updateConfig(form.value).then(response => {
        proxy.$modal.msgSuccess("修改成功");
        open.value = false;
        getList();
      });
    }
  });
}

/** 启用 */
function on(id) {
  loading.value = true;
  onConfig(id).then(response => {
    proxy.$modal.msgSuccess("启用成功");
    getList();
  });
}

/** 停用 */
function off(id) {
  loading.value = true;
  offConfig(id).then(response => {
    proxy.$modal.msgSuccess("停用成功");
    getList();
  });
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    sourceName: null,
    sourceType: null,
    clientId: null,
    clientSecret: null,
    redirectUri: null,
    status: '0',
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    remark: null
  };
}

getList();
</script>

<style scoped>
.nowrap {
  width: 100px;
  white-space: nowrap;
}
.wrap {
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oauth-login-item {
  display: inline-flex;
  white-space: nowrap;
  font-size:15px;
  margin-left: 5px;
}
.oauth-login-item svg {
  height: 20px;
  width: 20px;
}

</style>
